import React, { useState } from "react"
import { Modal, InputItem, Button } from "antd-mobile"
import logo from "./logo.svg"
import "./App.css"

const data = [
	{
		name: "格子衬衫",
		id: "111",
		count: 2,
		price: 100,
	},
	{
		name: "连衣裙",
		id: "222",
		count: 3,
		price: 100,
	},
	{
		name: "羽绒服",
		id: "333",
		count: 3,
		price: 100,
	},
]

const Row = ({ rowData, changeRow }) => {
	return (
		<div className="row">
			<img src={logo} className="App-logo" alt="logo" />
			<div className="row-content">
				<div className="row-content-head">
					<span style={{ fontSize: 14 }}>{rowData.name}</span>
					<span style={{ fontSize: 12, color: "#3366FF" }}>
						￥{rowData.price}
					</span>
				</div>
				<div className="row-content-bottom">
					<span
						style={{ fontSize: 20, color: "#333333" }}
						onClick={() => {
							changeRow(rowData.id, {
								...rowData,
								count: rowData.count + 1,
							})
						}}
					>
						+
					</span>
					<span style={{ fontSize: 12, color: "#3366FF" }}>
						{rowData.count}
					</span>
					<span
						style={{ fontSize: 20, color: "#333333" }}
						onClick={() => {
							changeRow(rowData.id, {
								...rowData,
								count: rowData.count - 1,
							})
						}}
					>
						-
					</span>
				</div>
			</div>
		</div>
	)
}

function App() {
	const [listData, setListData] = useState(data)
	const [modal, setModal] = useState(false)
	const [inputValue, setInputValue] = useState("")
	return (
		<div className="App">
			<div className="Header">
				<span style={{ fontSize: "30px" }}>购物车</span>
				<span
					style={{ fontSize: "45px" }}
					onClick={() => setModal(true)}
				>
					+
				</span>
			</div>
			<div className="List">
				{listData.map((item) => (
					<Row
						key={item.id}
						rowData={item}
						changeRow={(id, rowData) => {
							if (rowData.count === 0) {
								setListData(listData.filter((v) => v.id !== id))
							} else {
								setListData(
									listData.map((v) =>
										v.id === id ? rowData : v
									)
								)
							}
						}}
					/>
				))}
			</div>
			<div className="Footer">
				<div>
					<div>
						总价：
						<span style={{ fontSize: 12, color: "#3366FF" }}>
							￥
							{listData.reduce(
								(sum, v) => sum + v.count * v.price,
								0
							)}
						</span>
					</div>
					<div>包邮</div>
				</div>
				<div style={{ fontSize: 18, color: "#3366FF" }}>
					￥{listData.reduce((sum, v) => sum + v.count * v.price, 0)}
				</div>
			</div>
			<Modal
				popup
				visible={modal}
				onClose={() => setModal(false)}
				animationType="slide-up"
			>
				<div className="Modal">
					<InputItem
						value={inputValue}
						onChange={(v) => setInputValue(v)}
						placeholder="请输入商品编号"
					/>
					<Button
						type="primary"
						style={{ marginTop: 10 }}
						onClick={() => {
							let newGood = true
							const arr = listData.map((item) => {
								if (item.id === inputValue) {
									newGood = false
									return {
										...item,
										count: item.count + 1,
									}
								} else {
									return item
								}
							})
							if (newGood) {
								arr.push({
									name: `录入商品${arr.length + 1}`,
									id: inputValue,
									count: 1,
									price: 100,
								})
							}
							setListData(arr)
							setModal(false)

							setInputValue("")
						}}
					>
						加入购物车
					</Button>
				</div>
			</Modal>
		</div>
	)
}

export default App
